<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { onMounted, ref } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import {GetProductList,DeleteProduct} from "../../api/product"
import {
  Delete,
  Search,
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
const router=useRouter()
const tableData = ref([])
onMounted(()=>{
    GetProductListData()
})
const GetProductListData=async()=>{
    const res=await GetProductList()
    tableData.value=res.data.data
}
//删除
const DeleteProData=(id)=>{
    console.log("🚀 ~ DeleteProData ~ id:", id)
    ElMessageBox.confirm(
    '是否确定删除该产品',
    '删除产品',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        const res=await DeleteProduct(id)
        console.log(res.data);
        if(res.data.status==200){
        GetProductListData()
        ElMessage({
        type: 'success',
        message:res.data.massage,
         })
        }else{
           ElMessage.error('删除失败')
        }
    })
    .catch(() => {})
}
//编辑
const Preview=(id)=>{
    router.push(`/productadd?id=${id}`)
}
</script>
<template>
    <div>
         <el-page-header icon="" content="产品列表" title="产品管理"></el-page-header>
          <el-card class="cardlist" style="max-width: 100%">
              <el-table :data="tableData" height="250" style="width: 100%">
              <el-table-column prop="name" label="产品名称" width="200" />
              <el-table-column prop="cover" label="产品封面" width="180" >
                <template #default="{row}">
                         <img :src="row.cover" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="name" label="简要描述" width="350" />
              <el-table-column prop="date" label="更新时间" width="250" />
              <el-table-column prop="address" label="操作">
                <template #default="{row}">
                     <el-button :icon="Search" circle @click="Preview(row.id)"/>
                     <el-button  type="danger" :icon="Delete" circle @click="DeleteProData(row.id)"/>
                </template>
              </el-table-column>
  </el-table>
          </el-card>
    </div>
</template>
<style lang="less" scoped>
.cardlist{
    margin-top: 30px;
}
img{
    width: 80px;
    height: 60px;
    object-fit: cover;
}
</style>